<template>
  <div class="edit-calendar">
    <!-- 日期组件 -->
    <el-calendar 
      v-model="value">
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <el-button 
          circle 
          size="small"
          @click="getDetial(data.day)"
          :type="(all_date.indexOf(data.day) >=0 && value2 === data.day) ? 'primary' : ''"
          :disabled="(all_date.indexOf(data.day) >= 0) ? false: true">
          {{ data.day.split('-').slice(2).join('-') }} 
        </el-button>
      </template>
    </el-calendar>
    <!-- 自定义日期控件 -->
    <div class="control">
      <el-button
        round 
        size="mini" 
        :disabled = 'pre_disabled'
        type="primary" 
        @click="setValue('pre')">上个测试日</el-button>
      <el-button   
        round 
        size="mini"
        type="primary" 
        :disabled = 'next_disabled'
        @click="setValue('next')">下个测试日</el-button>
      <el-button  
        round 
        size="mini"
        type="primary" 
        :disabled = 'today_disabled'
        @click="setValue('today')"
        >今日</el-button>
    </div>
  </div>
  
</template>

<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();

var today_date = `${year}-${((month+1) < 10) ? '0' + (month + 1) : (month + 1) }-${date < 10 ? '0'+date : date }`
  export default {
    props:{
      all_date: {
          type: Array,
          required: true,
          default() {
              return []
          }
      }
    },
    data() {
      return {
        value: '',
        value2: '',
        check: true,
        study_state: 'pre',
        pre_disabled: true,
        next_disabled: true,
        today_disabled: true
      }
    },
    computed: {
    },
    watch: {
      all_date: {
        handler(newVal, oldVal) {
        console.log(oldVal)
          if (newVal !== []) {
            // console.log('监听到变化')
            const length = this.all_date.length
            // console.log(this.all_date)
            if (!length) {
                console.info('数组内没有内容，可能会出现错误！') 
                return false;
            }

            // 设置最近的一次训练；
            this.value = this.all_date[length - 1] 
            this.value2 = this.value

            // 判断决定上一个日期是否可以点；
            if(length > 1) {
                this.pre_disabled = false
            }

            // 判断今日按钮是否可点击；
            // console.log(today_date)
            if (this.all_date.indexOf(today_date) >= 0) {
                this.today_disabled = false   
            }
          }
        },
        deep: true
      }
    },
    created() {
    },
    methods: {
      // 执行请求当天数据
      getDetial(val) {
        this.value2 = val
        var index = this.all_date.indexOf(this.value2)
        var length = this.all_date.length
        if (index == 1) {
          this.pre_disabled = false
        } else if (index === 0) {
          this.pre_disabled = true
          if (index < length - 1) {
            this.next_disabled = false 
          }
        } 

        if (index == length - 1) {
          this.next_disabled = true
        } 
        console.log('选中日期为：'+val)
        this.$emit('dateClick', val)
      },
      // 设置选中日期
      setValue(val) {
        // console.log('点击前选中：'+this.value2)
        // 获取index，设置上一此练习日期；
        var index = this.all_date.indexOf(this.value2)
        var length = this.all_date.length
        // console.log('当前值所在的索引：'+index + 'length:'+ length)
        if (val === 'pre') {
          // 是否是正数第一个值
          if (index === 1) {
            this.pre_disabled = true
          } 
          if (index == length - 1) {
            this.next_disabled = false
          }
          this.value = this.all_date[index-1]
          this.value2 = this.value
        } else if (val === 'next') {
          // 判断是否是倒数第一个值
          if (index === length - 2) {
            this.next_disabled = true
          } 
          if (index === 0){
            this.pre_disabled = false
          }
          this.value = this.all_date[index+1]
          this.value2 = this.value 
        } else if (val === 'today') {
          this.value = today_date
          this.value2 = this.value
          this.next_disabled = true
          this.pre_disabled = false
        }
        this.$emit('dateClick', this.value2)
      }
    }
  }
</script>    

<style scoped>
  .control{
    position: absolute;
    right: 30px;
    top: 10px;
  }
  .edit-calendar{
    position: relative;
    height: 350px;
    overflow: hidden;
  }
  .edit-calendar /deep/.el-button--mini, .el-button--mini.is-round{
    height: 0.24rem;
    line-height: 0.24rem;
    padding: 0;
    font-size: 12px;
    width: 1rem;
  }
  .edit-calendar /deep/ .el-calendar__button-group{
    position: absolute;
    left: 130px;
    top: 10px;
  }
   .edit-calendar /deep/ .el-button-group>.el-button{
    height: 0.24rem;
    line-height: 0.24rem;
    font-size: 12px;
    padding-top: 0;
  }
  .edit-calendar /deep/ .el-calendar-table .el-calendar-day{
    height: auto;
    padding: 5px;
    text-align: center;
    cursor:default
  }
  .edit-calendar /deep/ .el-calendar-table thead th {
    padding: 12px 0;
    text-align: center;
  }
  .edit-calendar /deep/ .el-calendar-table tr td:first-child{
    border: none;
  }
  .edit-calendar /deep/ .el-calendar-table td{
    border: none;
  } 
  .edit-calendar /deep/ .el-button-group>.el-button:not(:last-child){
    margin-right: 10px;
  }
  .edit-calendar /deep/ .el-button-group>.el-button:not(:first-child):not(:last-child) {
    display: none
  }
  .edit-calendar /deep/ .el-button-group>.el-button{
    border-radius: 28px;
  }
  .edit-calendar /deep/ .el-calendar-table td.is-selected{
    background: none;
  }
</style>